<template>
  <px-scrollbar height="calc(100% - 260px)" class="p-[5px]">
    <div class="attr-list">
      <CommonAttr />
      <px-form>
        <px-form-item label="title">
          <px-input
            v-model="
              //@ts-ignore
              curComponent.propValue.title
            "
          />
        </px-form-item>

        <px-form-item label="contentList">
          <px-input v-model="jsonRaw" style="width: 240px" :rows="2" type="textarea" @change="jsonFun" />
        </px-form-item>
        <px-form-item label="collapsed">
          <px-radio-group
            v-model="
              //@ts-ignore
              curComponent.propValue.collapsed
            "
            class="ml-4"
          >
            <px-radio :label="true" size="large">开启</px-radio>
            <px-radio :label="false" size="large">关闭</px-radio>
          </px-radio-group>
        </px-form-item>
        <px-form-item label="titleIconName">
          <px-input
            v-model="
              //@ts-ignore
              curComponent.propValue.iconName
            "
          />
        </px-form-item>
      </px-form>
      <div>
        <AceEditor
          ref="aceRef"
          :config-json="
            //@ts-ignore
            curComponent.propValue.tableColumns
          "
          class="mb-[10px] w-[100%] h-[200px]"
        />

        <px-button style="margin-bottom: 10px" @click="submitComponentEvents">保存设置</px-button>
      </div>
    </div>
  </px-scrollbar>
</template>

<script setup lang="ts">
import CommonAttr from "@visual/custom-component/common/CommonAttr.vue";
import { useComponent } from "@visual/stores";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import { PxMessage } from "px-ui";

const aceRef = ref();
import AceEditor from "@visual/components/Editor/AceEditor.vue";

const componentStore = useComponent();
const { setCurComponentProps } = componentStore;
const { curComponent } = storeToRefs(componentStore);
const jsonRaw = ref("");
import { parseObjectLiteral } from "@visual/utils";

function jsonFun() {
  try {
    let json = parseObjectLiteral(jsonRaw.value);
    if (Array.isArray(json)) {
      setCurComponentProps({ key: "contentList", val: json });
    } else {
      setCurComponentProps({ key: "contentList", val: [json] });
    }
  } catch (e) {
    console.log(e);
  }
}
function submitComponentEvents() {
  let aceValue = aceRef.value.getValue();
  //@ts-ignore
  curComponent.value.propValue.tableColumns = aceValue;

  PxMessage({
    message: "数据保存成功",
    type: "success"
  });
}
</script>
